<template>
  <div class="layout-padding">
    <!-- 操作日志 -->
    <el-card shadow="hover" class="layout-padding-auto">
      <TableSearch :search="state.search" @search="onSearch" @listenClick="listenClick" />
      <Table ref="tableRef" v-bind="state.tableData" class="table-demo" @delRow="onTableDelRow"
        @pageChange="onTablePageChange" @listenClick="listenClick">
        <template #default="{ slotData, slotColumn }">
          <div v-if="slotColumn.key === 'operationType'">
            {{ operationTypes(slotData.operationType) }}
          </div>
        </template>
      </Table>
    </el-card>
  </div>
</template>
  
<script setup lang='ts'>
import { ref, watch, reactive, onMounted, defineAsyncComponent } from 'vue'
import { ElMessage, TabsPaneContext } from 'element-plus';
import { fa } from 'element-plus/es/locale';
import { TableDemoPageType } from '/@/types/views';
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));

const dialogVisible = ref<boolean>(false)//弹窗是否出现
const dialogForm = {
  width: '40%',
  title: ''
}

const activeName = ref('1')

const onClose = () => {
  dialogVisible.value = !dialogVisible.value
}

const onSubmit = () => {
  dialogVisible.value = !dialogVisible.value
}

const onttt = () => {
  dialogVisible.value = !dialogVisible.value
}

// 定义变量内容
const tableRef = ref<RefType>();
const state = reactive<any>({
  tableData: {
    flash: false, // 刷新表格
    // 表头内容（必传，注意格式）
    header: [
      { key: 'userAccount', colWidth: '', title: '登录账号', type: 'text' },
      { key: 'operator', colWidth: '', title: '操作人', type: 'text' },
      { key: 'operationType', colWidth: '', title: '操作类型', type: 'slot' },
      { key: 'logDesc', colWidth: '500', title: '提示信息', type: 'text' },
      { key: 'createTime', colWidth: '', title: '操作时间', type: 'text' },
    ],
    columnBtn: [],//操作里面的按钮
    // 配置项（必传）
    config: {
      listApi: '/system/mobile/sysLogInfo/logListByPage',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: true, // 是否显示表格序号
      isSelection: false, // 是否显示表格多选
      isOperate: false, // 是否显示表格操作栏
      isExtend: false // 是否可以扩展
    },
    // 搜索参数
    param: {
      type: 1 // 必传参数，分页的不要传
    },
  },
  // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
  search: {
    param: [
      { label: '', prop: 'keyword', placeholder: '可输入账号、操作人名称搜索', type: 'input' },
      { label: '时间筛选', prop: 'daterange', placeholder: '请选择开始时间-结束时间', type: 'daterange' },
      {
        label: '操作类型', prop: 'operationType', placeholder: '操作类型',
        options: [{ configValue: '新增', id: 1 }, { configValue: '编辑', id: 2 }, { configValue: '删除', id: 3 }],
        type: 'select'
      },
    ],
    reset: true
  },
});

// 初始化列表数据
const getTableData = () => {
  state.tableData.flash = !state.tableData.flash;
};
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
  state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
  if (state.tableData.param.daterange && state.tableData.param.daterange.length != 0) {
		state.tableData.param.startTime = state.tableData.param.daterange[0]
		state.tableData.param.endTime = state.tableData.param.daterange[1]
	} else {
		state.tableData.param.startTime = ''
		state.tableData.param.endTime = ''
	}
  state.tableData.flash = !state.tableData.flash;
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
  ElMessage.success(`删除${row.name}成功！`);
  getTableData();
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
  state.tableData.param.pageNum = page.pageNum;
  state.tableData.param.pageSize = page.pageSize;
  getTableData();
};

//打开新增设备窗口
const addEquipment = () => {
  dialogForm.title = '新增设备'
  dialogVisible.value = !dialogVisible.value
}
const cancel = () => {
  dialogVisible.value = !dialogVisible.value
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
}

//操作类型数据转换
const operationTypes = (type: number) => {
  let typeName = ''
  switch (type) {
    case 1:
      typeName = '新增';
      break;
    case 2:
      typeName = '编辑';
      break;
    case 3:
      typeName = '删除';
      break;
    default:
      typeName = '其他';
  }
  return typeName;
}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = { 'addEquipment': addEquipment, }
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)//中括号里面是方法名,小括号是方法的参数
}

// 页面加载时
onMounted(() => {
  getTableData();
});

</script>